<template>
	<view class="page">
		<view class="fui-wrap">
			<fui-form ref="formRef" :model="formData" :top="store.getters.statusBarHeight">
				<fui-form-item label="公司名称" prop="corporateName">
					<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入公司名称"
						v-model="formData.corporateName" :maxlength="50"></fui-input>
				</fui-form-item>
				<fui-form-item label="社会信用代码" prop="creditCode">
					<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入社会信用代码"
						v-model="formData.creditCode" :maxlength="50"></fui-input>
				</fui-form-item>
				<fui-form-item label="负责人姓名" prop="userName">
					<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入负责人姓名"
						v-model="formData.userName" :maxlength="50"></fui-input>
				</fui-form-item>
				<fui-form-item label="登录手机号" prop="mobile">
					<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入登录手机号"
						v-model="formData.mobile"></fui-input>
				</fui-form-item>
				<fui-form-item label="是否自营" prop="isSelfManage">
					<fui-radio-group class="radio-wrapper" name="radio" v-model="formData.isSelfManage">
						<fui-label>
							<fui-radio value="Y" :checked="formData.isSelfManage === 'Y'" scaleRatio="0.8"></fui-radio>
							<fui-text text="是" :padding="[0, '10rpx']" size="28"></fui-text>
						</fui-label>
						<fui-label>
							<fui-radio value="N" :checked="!formData.isSelfManage || formData.isSelfManage === 'N'" scaleRatio="0.8"></fui-radio>
							<fui-text text="否" :padding="[0, '10rpx']" size="28"></fui-text>
						</fui-label>
					</fui-radio-group>
				</fui-form-item>
				<!-- <fui-form-item label="登录密码" prop="loginPsw">
					<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入登录密码"
						v-model="formData.loginPsw" disabled color="#999"></fui-input>
				</fui-form-item> -->
        <view class="ui-page-tips">
          <fui-icon name="info-fill" size="28" color="#fcad4c"></fui-icon>本平台初始用户密码：姓名首字母+手机号后四位，如当前人员手机号已在本平台完成注册或有过邀约记录，请使用原有密码进行登录。
        </view>
				<view class="fui-btn__box">
					<fui-button text="取消" class="page-btn btn-back" bold @click="tab.navigateBack"></fui-button>
					<fui-button :text="editId ? '修改' : '邀约'" class="page-btn" bold @click="submit"></fui-button>
				</view>
			</fui-form>
		</view>
	</view>
</template>

<script setup>
	import { ref, inject, watch } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
  import { useStore } from 'vuex'
	import { getDefaultPassword } from '@/utils/tools'
	import supplierApi from '@/api/supplier'

	const tab = inject('$tab')
	const modal = inject('$modal')
	const store = useStore()

	const formRef = ref(null)
	const rules = [{
			name: 'corporateName',
			rule: ['required', 'minLength:2'],
			msg: ['请输入公司名称', '公司名称必须2个或以上字符']
		},
		{
			name: 'creditCode',
			rule: ['required'],
			msg: ['请输入社会信用代码']
		},
		{
			name: 'userName',
			rule: ['required', 'minLength:2'],
			msg: ['请输入负责人姓名', '姓名必须2个或以上字符']
		},
		{
			name: 'mobile',
			rule: ['required', 'isMobile'],
			msg: ['请输入登录手机号', '请输入正确的手机号']
		},
		// {
		// 	name: 'loginPsw',
		// 	rule: ['required', 'isEnAndNo'],
		// 	msg: ['请输入登录密码', '密码为英文和数字组合，不超过20个字符']
		// }
	];

	const editId = ref()
	onLoad(option => {
		if (option.companyId) {
			editId.value = option.companyId
			getSupplierDetail()
		}
	}) 
  
	// 初始化表单数据
	const formData = ref({
		corporateName: '',
		creditCode: '',
		userName: '',
		mobile: '',
		isSelfManage: 'N',
		// loginPsw: ''
	})

	// watch(formData.value, (newValue) => {
	// 	if (newValue.userName && newValue.userName.length >= 2 && newValue.mobile && newValue.mobile.length >= 11) {
	// 		formData.value.loginPsw = getDefaultPassword(newValue.userName, newValue.mobile)
	// 	}
	// })

	// 获取修改的供应商信息
	const getSupplierDetail = () => {
		try {
			supplierApi.getSupplierDetail(editId.value).then((res) => {
				if (res.code === 0) {
					formData.value = {
						corporateName: res.data.companyName,
						creditCode: res.data.creditCode,
						userName: res.data.adminName,
						mobile: res.data.adminPhone
					}
					// formData.value.loginPsw = getDefaultPassword(res.data.adminName, res.data.adminPhone)
				} else {
					modal.msgError(res.msg)
				}
			})
		} catch(err) {
			modal.msgError('获取供应商信息失败！')
		}
	}

	// 提交表单方法
	const submit = async () => {
		const submitData = ref({
			companyName: formData.value.corporateName,
			creditCode: formData.value.creditCode,
			adminName: formData.value.userName,
			adminPhone: formData.value.mobile,
			isSelfManage: formData.value.isSelfManage
		})
		const validRes = await formRef.value.validator(formData.value, rules)
		if (validRes.isPassed) {
			if (editId.value) {
				submitData.value.id = editId.value
				editSupplierFun(submitData.value)
			} else {
				addSupplierFun(submitData.value)
			}
		}
	}

	// 邀约
	const addSupplierFun = (data) => {
		supplierApi.inviteSupplier(data).then((res) => {
			if (res.code === 0) {
				if (res.msg) {
					modal.msg(res.msg)
				} else {
					modal.msg('邀约短信已发送！')
				}
				setTimeout(() => {
					tab.navigateBack()
				}, 2000)
			} else {
				modal.msgError(res.msg)
			}
		})
	}

	// 修改邀约信息
	const editSupplierFun = (data) => {
		supplierApi.updateInviteData(data).then((res) => {
			if (res.code === 0) {
				if (res.msg) {
					modal.msg(res.msg)
				} else {
					modal.msg('邀约信息已修改！')
				}
				setTimeout(() => {
					tab.navigateBack()
				}, 2000)
			} else {
				modal.msgError(res.msg)
			}
		})
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100%;
		height: 100%;
		padding: 30rpx 36rpx;
		box-sizing: border-box;
		overflow-y: auto;
		background: #F8F8F8;
		font-family: PingFang SC, PingFang SC;

		:deep(.fui-form__msg-wrap) {
			z-index: 11000;
		}

		.fui-wrap {
			border-radius: 16rpx;
			overflow: hidden;

			:deep(.fui-form__item-sizing) {
				width: 200rpx !important;
				font-size: 28rpx !important;
				font-weight: bold !important;
				color: #333333 !important;
			}

			:deep(.fui-input__placeholder) {
				font-size: 28rpx !important;
				color: #999999 !important;
			}

			:deep(.fui-form__item-bottom) {
				right: 1rem !important;
			}

			.fui-btn__box {
				width: 100%;
				padding: 100rpx 0rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;

				.page-btn {
					width: calc(50% - 16rpx) !important;
					height: 88rpx !important;
					line-height: 88rpx !important;
					flex: none;

					:deep(.fui-button__primary) {
						height: 88rpx !important;
						line-height: 88rpx !important;
					}
				}

				.btn-back {
					:deep(.fui-button__primary) {
						background-color: #ffffff !important;
						color: var(--fui-color-primary) !important;
						border: 1PX solid var(--fui-color-primary) !important;

						.fui-text__bold {
							color: var(--fui-color-primary) !important;
						}
					}
				}
			}
		}
		.radio-wrapper {
			display: flex;
			align-items: center;
			font-size: 0;
			line-height: 1.2;
			::v-deep .fui-label__box {
				margin-right: 48rpx !important;
			}
		}
	}
</style>